<template>
  <div
    id="mainCenter"
    :style="{background:styles.moduleTitle==1?styles.colorIcon:'url('+styles.img+')'}"
  >
    <!-- 页面设置 -->
    <nameless></nameless>
    <!-- 功能组件 关注条 -->
    <attention :num="-3"></attention>
    <!-- 功能组件  悬浮按钮 -->
    <susBtn :num="-2"></susBtn>
    <!-- 功能组件  下单提醒 -->
    <remind :num="-4"></remind>
    <!-- 基础组件 -->
    <div class="main-center">
      <draggable @end="end" element="ul" v-model="lists">
        <div @click="choose(i,v.name)" class="center-border" v-for="(v,i) in lists" :key="i+'2'">
          <div :class="[currentId==i?'cur-line':'','out-line']" class></div>
          <component :styles="v.styles" :is="v.name"></component>
          <div class="center-delete">
            <el-popover v-if="currentId==i" placement="left" width="200" v-model="visible">
              <p>确定删除此组件吗？</p>
              <div style="text-align: right; margin: 10px 0 0">
                <el-button plain size="mini" @click="visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click.stop="deleteGroup(i)">确定</el-button>
              </div>
              <el-button type="danger" size="mini" slot="reference">删除</el-button>
            </el-popover>
          </div>
        </div>
      </draggable>
    </div>

  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import draggable from "vuedraggable";
import search from "@/components/group/search/search";
import notice from "@/components/group/notice/notice";
import fixed from "@/components/group/fixed/fixed";
import picLunbo from "@/components/group/picLunbo/picLunbo";
import btn from "@/components/group/btn/btn";
import btn2 from "@/components/group/btn2/btn2";
import pictures from "@/components/group/picture/picture";
import titles from "@/components/group/title/title";
import blank from "@/components/group/blank/blank";
import lines from "@/components/group/line/line";
import storeMessage from "@/components/group/storeMessage/storeMessage";
import book from "@/components/group/editor/editor";
import card from "@/components/group/card/card";
import margic from "@/components/group/margic/margic";
import product from "@/components/group/product/product";
import hot from "@/components/group/hot/hot";
import vip from "@/components/group/vip/vip";
import listNav from "@/components/group/listNav/listNav";
import nameless from "@/components/group/nameless/nameless";
import attention from "@/components/group/attention/attention";
import susBtn from "@/components/group/susBtn/susBtn";
import remind from "@/components/group/remind/remind";
import discount from "@/components/group/discount/discount";
import information from "@/components/group/information/information";
import storeEvaluate from "@/components/group/storeEvaluate/storeEvaluate";
import myBalance from "@/components/group/myBalance/myBalance";
import storeRollbag from "@/components/group/storeRollbag/storeRollbag";
import storeInformation from "@/components/group/storeInformation/storeInformation";
import storeVideo from "@/components/group/video/video";
import attAccount from "@/components/group/attAccount/attAccount";
export default {
  name: "mainCenter",
  data() {
    return {
      visible: false,
      lists: [],
    };
  },
  components: {
    draggable,
    search,
    notice,
    fixed,
    picLunbo,
    btn,
    btn2,
    pictures,
    titles,
    blank,
    lines,
    storeMessage,
    book,
    card,
    margic,
    product,
    hot,
    vip,
    listNav,
    nameless,
    attention,
    susBtn,
    remind,
    discount,
    information,
    myBalance,
    storeEvaluate,
    storeRollbag,
    storeInformation,
    storeVideo,
    attAccount,
  },
  watch: {
    list() {
      this.lists = this.list;
    },
  },
  computed: {
    ...mapState([
      "list",
      "currentId",
      "currentName",
      "pageSetting",
      "susBtn",
      "attention",
      "remind",
    ]),
    styles() {
      return this.pageSetting[0].styles;
    },
  },
  created() {
    this.lists = this.list;
  },
  methods: {
    ...mapMutations(["getList", "getCurrenChoose", "getCurrenChooseName"]),
    choose(i, name) {
      this.getCurrenChoose(i), this.getCurrenChooseName(name + "Change");
    },
    deleteGroup(i) {
      this.visible = false;
      if (i == 0) {
        this.list.splice(i, 1);
        this.getCurrenChoose(0);
        this.getCurrenChooseName("");
      } else if (i > 0) {
        this.list.splice(i, 1);
        this.getCurrenChoose(i - 1);
        this.getCurrenChooseName(this.list[i - 1].name + "Change");
      }
    },
    end(evt) {
      this.getList(JSON.stringify(this.lists));
      this.getCurrenChoose(evt.newIndex);
      this.choose(evt.newIndex, this.lists[evt.newIndex].name);
    },
  },
};
</script>


<style lang="less" scoped>
@import url("../../assets/css/base.less");
#mainCenter {
  margin: 50px auto;
  width: 375px;
  min-height: 665px;
  box-shadow: 0px 4px 14px rgba(133, 148, 162, 0.2);
  position: relative;
  > .main-center {
    min-height: 75vh;
    border: 1px solid #eee;
    .center-border:hover {
      .out-line {
        border: 1px dashed @mainColor;
        display: block;
      }
      .cur-line {
        border: 1px solid @mainColor !important;
      }
    }
    .center-border {
      transition: all 0.5s;
      position: relative;
      .cur-line {
        display: block !important;
      }
      .out-line {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border: 1px solid @mainColor;
        z-index: 50;
        display: none;
      }
      .center-delete {
        text-align: right;
        width: 80px;
        position: absolute;
        right: -64px;
        top: 0;
      }
    }
  }
}
</style>
